import React, { FC,
    // useState
 } from 'react'
import { Outlet,useNavigate,useLocation } from 'react-router-dom'
import {Button,Space,Divider,message} from 'antd'
import './ManageLayout.css'
import { PlusOutlined,BarsOutlined,StarOutlined,DeleteOutlined } from '@ant-design/icons'
import { createQuestionService } from '../service/question.ts'
import { useRequest } from 'ahooks'
const ManageLayout: FC = ()=>{
    const nav = useNavigate()
    const { pathname } = useLocation()
    // const [loading,setLoading] = useState(false)
    // const handleCreateClick = async()=>{
    //     setLoading(true)
    //     const data = await createQuestionService()
    //     const { id } = data ||{}
    //     if(id){
    //         nav(`/question/edit/${id}`)
    //         message.success('创建成功')
    //         setLoading(false)
    //     }else{
    //         setLoading(false)
    //     }
    // }

    const { loading, run:handleCreateClick } = useRequest(createQuestionService,{
        manual: true,
        onSuccess(result){
            nav(`/question/edit/${result.id}`)
            message.success('创建成功')
        }
    })

    return <div className="container">
        <div className="leftManage">
            <Space direction="vertical">
                <Button 
                type={pathname.startsWith('/manage/list') ? 'primary' : 'text'}
                size="large" 
                onClick={handleCreateClick}
                icon={<PlusOutlined />}
                disabled={loading}
                >创建问卷
                </Button><br />
                <Divider style={{borderTop:'transparent'}} />
                <Button type={pathname.startsWith('/manage/list') ? 'default' : 'text'} size="large" icon={<BarsOutlined />} onClick={()=> nav('/manage/list')}>我的问卷</Button>
                <Button type={pathname.startsWith('/manage/star') ? 'default' : 'text'} size="large" icon={<StarOutlined />} onClick={()=> nav('/manage/star')}>星标问卷</Button>
                <Button type={pathname.startsWith('/manage/trash') ? 'default' : 'text'} size="large" icon={<DeleteOutlined />} onClick={()=> nav('/manage/trash')}>回收站</Button>
            </Space>
        </div>
        <div className="right">
            <Outlet />
        </div>
        <div></div>
    </div>
}

export default ManageLayout 